<!--  -->
<template>
    <div id="home">
        <header>
            <el-input v-model="link_btn.esurl" placeholder="http://192.168.1.92:9200" autocomplete='on'></el-input>
            <el-button :type="link_btn.type" @click="link_btn.link()" style="margin-left:5px;">{{link_btn.txt}}</el-button>
        
            <el-select
                v-model="_select.value"
                filterable
                allow-create
                default-first-option
                placeholder="请选择索引"
                style="margin-left:5px;"
            >
                <el-option
                v-for="item in _select.esindex"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
                </el-option>
            </el-select>
            <el-button type="primary" style="margin-left:5px;" @click="_select.searchbtn()">搜索</el-button>
            <el-button type="info" style="margin-left:5px;" @click="clear">重置</el-button>

        </header>
        <div style="margin:10px">
            <div>
                可显示字段:
                <el-checkbox-group v-model="checkbox_group.checkList" @change="checkbox_group.change">
                    <el-checkbox v-for="(item,index) in _collapse.data[0]._source" :key="index" :label="index" />
                </el-checkbox-group>                
            </div>
            <div>总数:{{_collapse.total}}</div>
            <el-collapse v-model="_collapse.activeNames">
                <el-collapse-item v-for="item in _collapse.data" :key="item._id" :name="item._id">
                    <template #title>
                        <span>
                            <el-tag>_id</el-tag><span style="padding:0 5px;">{{item._id}}</span>
                        </span>
                        <span>
                            <el-tag>_index</el-tag><span style="padding:0 5px;">{{item._index}}</span>
                        </span>
                        <span v-for="(v,k) in checkbox_group.checkList" :key="k">
                            <el-tag>{{v}}</el-tag><span style="padding:0 5px;">{{item._source[v]}}</span>
                        </span>                        

                    </template>
                    <div>
                        {{item}}
                    </div>
                    <div style="margin-top:10px;">
                        <router-link to="/content/json" @click="gotourl(item)" style="margin:0 5px;">
                        <el-button type="info" plain>查看 json</el-button>
                        </router-link>
                        <router-link to="/content/html" @click="gotourl(item)" style="margin:0 5px;">
                        <el-button type="primary" plain>查看 html</el-button>
                        </router-link>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        
        <el-pagination background layout="prev, pager, next" :total="_collapse.total" :current-page="_collapse.current" @current-change="_select.search">
        </el-pagination>
  
    </div>
    
</template>

<script setup>
import {link_btn,_select,_collapse,gotourl,checkbox_group,clear} from "../assets/home.js"



</script>
<style scoped>
/* @import url(); 引入css类 */
#home header{
    display: flex;
}

</style>